import React      from 'react';
import { Link }   from 'react-router-dom';

import MUtil from 'util/mm.jsx';
import User from 'service/user-service.jsx';

import PageTitle  from 'component/page-title/index.jsx';
import TableList  from 'util/table-list/index.jsx';
import Pagination from 'util/pagination/index.jsx'

const __mm = new MUtil();
const __user = new User();

class UserList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      // list 需要先做一个初始化，不然一开始的时候，list不是一个数组，就不能用 map
      list        : [],
      pageNum     : 1,
      // firstLoading 来判断 list 为空 是因为第一次加载，还是后面的接口返回数据为空
      // firstLoading: true
    };
  }

  // 调用 loadUserList 的生命函数
  componentDidMount(){
    this.loadUserList();
  }

  /* , () => {
    this.setState({
      firstLoading: false
    })
  } */
  loadUserList(){
    __user.getUserList(this.state.pageNum).then(res => {
      this.setState(res)
    }, errMsg => {
      // 假如接口请求错误的话，我们应该把原来的数据删掉
      this.setState({
        list: []
      });
      __mm.errorTips(errMsg);
    });
  }
  
  // 当分页页面的页数发生变化的时候
  // setState 是一个异步函数
  onPageNumChange(pageNum){
    this.setState({
      pageNum
    }, () => {
      this.loadUserList();
    });
  }

  // new Data(user.createTime).toLocaleString() 这就将其转化为了当地的一个时间
  render(){
    let listBody = this.state.list.map((user, index) => {
      return (
        <tr key={index}>
          <td>{user.id}</td>
          <td>{user.username}</td>
          <td>{user.email}</td>
          <td>{user.phone}</td>
          <td>{new Date(user.createTime).toLocaleString()}</td>
        </tr>
      );
    });
    // let listError = (
    //   <tr>
    //     <td colSpan='5' className="text-center">
    //       {this.state.firstLoading ? "正在加载数据..." : "没有找到相应的结果～"}
    //     </td>
    //   </tr>
    // );
    // let tableBody = this.state.list.length > 0 ? listBody : listError;

    return (
      <div id="page-wrapper">
        <PageTitle title="用户列表"/>
        <TableList tableHeads={['ID','用户名','邮箱','电话','注册时间']}>
          {listBody}
        </TableList>
        {/* <div className="row">
          <div className="col-md-12">
            <table className="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>电话</th>
                  <th>注册时间</th>
                </tr>
              </thead>
              <tbody>
                {tableBody}
              </tbody>
            </table>
          </div>
        </div> */}
        <Pagination
          current={this.state.pageNum}
          total={this.state.total}
          onChange={(pageNum) => {this.onPageNumChange(pageNum)}}
        />
      </div>
    );
  }
}

export default UserList;